<template>
	<div id = "loginform">
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
            <el-form-item prop="username">
                <el-input v-model="loginForm.username" placeholder="用户名：admin / user">
                    <template #prefix>
                        <el-icon class="el-input__icon el-icon-user"></el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="loginForm.password" placeholder="密码：123456" show-password autocomplete="new-password">
                    <template #prefix>
                        <el-icon class="el-input__icon el-icon-lock" ></el-icon>
                    </template>
                </el-input>
            </el-form-item>
        </el-form>
        <div class="login-btn">
            <el-button icon="el-icon-refresh-right" round @click="resetForm()" size="large">填写默认</el-button>
            <el-button icon="el-icon-check" round @click="login()" size="large" type="primary" >
                登录
            </el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
		return {
			msg:'',
			loginForm:{
				username : '',
				password : '',
				ip : '',
				logintime:'',
			},
			UserList:[],
			loginRules:{
				username: [
					{ required: true, message: '请输入用户名', trigger: 'blur' },
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
				],
			}
		}
	},
	mounted(){
		this.getData();
	},
	methods:{
		 async getData(){
			const data = await this.$moc.user.doGet();
			this.UserList = data.data.data.Userlist
		},
		login(){
			const username = this.loginForm.username;
			const password = this.loginForm.password;
			if (username ==='' || password === ''){
				const msg = username === ''?"请输入用户名":"请输入密码"
				this.$message({showClose: true,message: msg,type: 'error'});
			}
			else {
				let state = "用户名不存在";
				for(let i in this.UserList){
					if(this.UserList[i].username === username){
						state = "密码错误";
						if(this.UserList[i].password === password){
							state = "登录成功";
						}
					}

				}
				// console.log(state);
				if(state === '登录成功'){
					this.$router.push({name:'index',params: {name:`username`}})
					localStorage.setItem("name", username)
					localStorage.setItem("unlogin", false)
				    this.$message({showClose: true,message:state,type: "success"});
				}
				else{
				    this.$message({showClose: true,message:state,type: "error"});
				}
			}
		},
		resetForm() {
        	this.loginForm = {
				username : 'admin',
				password : '123456',
				ip : '',
				logintime:'',
			}
      	},
    }
	
}
</script>

<style lang="scss" scoped>
.login-form {
	width: 420px;
	padding: 50px 40px 45px;
	border-radius: 10px;
	box-shadow: 2px 3px 7px rgb(0 0 0 / 20%);
	.login-logo {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 45px;
		.login-icon {
			width: 60px;
			height: 52px;
		}
		.logo-text {
			padding: 0 0 0 25px;
			margin: 0;
			font-size: 36px;
			font-weight: bold;
			color: #34495e;
			white-space: nowrap;
			}
		}
		.el-form-item {
		margin-bottom: 40px;
		}
		.login-btn {
			display: flex;
			justify-content: space-between;
			width: 100%;
			margin-top: 40px;
			white-space: nowrap;
			.el-button {
				background: #41b581;
				width: 700px;
			}
		}
	}
</style>